<template>
    <div class="xm-article">
        <van-tabs class="xm-tabs" v-model="active">
            <van-tab title="推荐" to="/home/article/recommend"></van-tab>
            <van-tab title="最新" to="/home/article/new"></van-tab>
        </van-tabs>
        <div class="content">
            <keep-alive
                :include="['XmNew', 'XmRecommend']"
            >
                <router-view />
            </keep-alive>
            <!-- <router-view /> -->
        </div>
    </div>
</template>

<script>
export default {
  name: 'XmArticle',
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style lang="less" scoped>
.xm-article {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .xm-tabs {
        border-bottom: 1px solid #ebedf0;
    }
    .content {
        flex: 1;
        overflow: hidden;
    }
}
</style>
